<template>
	<view class="pageBox">
		<view class="con">
			<view class="infoBox" v-for="(item,index) in info.orderGoods" :key="index">
				<view class="info flex">
					<image class="thumb" :src="item.thumb"></image>
					<view class="infoR">
						<view class="infoRT">
							{{item.title}}
						</view>
						<view class="infoRB flex-between">
							<view class="price">
								¥{{item.price}}
							</view>
							<view class="sku">
								x {{item.num}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="reason flex-between" @click="paywayShow = true">
			<view class="reasonLeft">
				退款原因
			</view>
			<view class="reasonRight flex-row">
				<input class="refundReason" type="text" :disabled="true" placeholder="请选择退款原因"
					v-model="form.refundReason" />
				<uni-icons type="right" size="15" color="#666666"></uni-icons>
			</view>
		</view>

		<view class="refundDesc">
			<view class="price flex-row">
				<view class="priceTitle">
					退款金额：
				</view>
				<view class="priceNum">
					¥{{ orderGoodsPrice }}
				</view>
			</view>
			<view class="explain flex-row">
				<view class="explainTitle">
					退款说明：
				</view>
				<input class="explainText" type="text" placeholder="请输入退款说明" v-model="form.refundDesc">
			</view>
		</view>

		<view class="upload">
			<view class="uploadTitle">
				上传凭证
			</view>
			<view class="uploadItem">
				<uni-file-picker class="picker" fileMediatype="image" mode="grid" @select="select"
					@delete="pickerDelete" :image-styles="imageStyles">
					<image class="uploadBg" src="http://www.bobei.shop/static/my/uploadBg.png"></image>
				</uni-file-picker>
			</view>
		</view>

		<button :plain="true" class="btn" @click="onBtn">提交</button>


		<my-popup-tips type="bottom" :showTips="paywayShow" @tipsOpen="paywayOpen" @tipsClose="paywayClose">
			<template #default>
				<view class="paywayBox">
					<image class="close" src="http://www.bobei.shop/static/my/payway/close.png"
						@click="paywayShow = false"></image>
					<view class="paywayTitle">
						退款原因
					</view>

					<view class="way">
						<view class="wayItem flex-between" v-for="item in actions" :key="item.id"
							@click="onWayItem(item)">
							<view class="wayItemLeft flex-row">
								<view class="wayItemLeftCon">
									<view class="wayItemLeftConText">
										{{ item.name }}
									</view>

								</view>
							</view>
							<view class="wayItemRight">
								<image class="choose" src="http://www.bobei.shop/static/login/choose.png"
									v-if="!item.status">
								</image>
								<image class="choose" src="http://www.bobei.shop/static/login/choosed.png"
									v-if="item.status">
								</image>
							</view>
						</view>

					</view>

					<button class="paySure" :plain="true" @click="onSureBtn">确认</button>
				</view>
			</template>
		</my-popup-tips>
	</view>
</template>

<script>
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue";
	export default {
		components: {
			"my-popup-tips": myPopupTips,
		},
		data() {
			return {
				id: "",
				goodsId: "",
				orderGoodsId: "",
				orderGoodsPrice: "",
				refundType: "",
				info: {
					"orderNo": "",
					"addressId": {
						"name": "",
						"mobile": "",
						"address": ""
					},
					"status": 0,
					"num": 1,
					"orderGoods": [{
						"id": 3779,
						"shopId": 0,
						"orderId": 3705,
						"goodsId": 42427,
						"price": "0.00",
						"status": 0,
						"refundId": 0,
						"refundNum": 0,
						"refundMoney": "0.00",
						"deletedAt": null,
						"createdAt": "2022-11-18 11:16:54",
						"updatedAt": "2022-11-18 11:16:54",
						"specs": "",
						"specTitle": "",
						"credits": 0,
						"num": 1,
						"title": "",
						"thumb": "",
						"genre": 0,
						"marketprice": "0.00",
						"score": 0,
						"commentType": 0,
						"refund": null
					}]
				},
				form: {
					refundReason: "",
					refundDesc: "",
				},
				imageValue: [],
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						color: "transparent",
						width: 0,
						style: 'dashed',
						radius: '0rpx'
					}
				},
				paywayShow: false,
				actions: [{
						id: "0",
						name: "拍错/效果不好/不喜欢",
						status: false,
					},
					{
						id: "1",
						name: "商品与描述不符",
						status: false,
					},
					{
						id: "2",
						name: "其他",
						status: false,
					},
				],
				num: "",
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.goodsId = option.goodsId;
			this.orderGoodsId = option.orderGoodsId;
			this.refundType = option.refundType;
			this.getINfo();
		},
		methods: {
			getINfo() {
				this.$post({
					url: '/portal/Shop',
					module: 'Order',
					interface: '1001',
					data: {
						id: Number(this.id)
					}
				}).then(res => {
					this.info = res;
					this.orderGoodsPrice = res.finalPrice;
					res.orderGoods.forEach((item) => {
						if (this.orderGoodsId == item.id) {
							this.orderGoodsPrice = item.marketprice;
							this.num = item.num;
						}
					})
				})
			},
			// 获取上传状态
			select(e) {
				// // console.log('选择文件：', e);
				this.$upload({
					data: {
						filePath: e.tempFilePaths[0]
					}
				}).then((res) => {
					let obj = {
						payImg: res.file,
						tempFilePath: e.tempFilePaths[0],
					}
					this.imageValue.push(obj);
					// console.log("imageValue:", this.imageValue);
				}).catch((error) => {
					// console.log("上传error：", res);
				})
			},
			// 文件从列表移除时触发
			pickerDelete(e) {
				// // console.log('文件从列表移除时触发：', e);
				this.imageValue.forEach((item, index) => {
					if (item.tempFilePath === e.tempFilePath) {
						this.imageValue.splice(index, 1);
					}
				})
			},
			paywayOpen(param) {
				// console.log("tips弹出", param)
			},
			paywayClose(param) {
				// console.log("tips关闭", param)
			},
			onSureBtn() {
				this.paywayShow = false;
			},
			onWayItem(param) {
				this.actions.forEach((item) => {
					item.status = false;
					if (param.id == item.id) {
						item.status = true;
						this.form.refundReason = item.name;
					}
				})
			},
			onBtn() {
				// console.log("提交")
				if(!this.form.refundReason) {
					uni.showToast({
						title: '请选择退款原因',
						duration: 1500,
						icon: 'none',
					});
					return;
				}
				if(!this.form.refundDesc) {
					uni.showToast({
						title: '请输入退款说明',
						duration: 1500,
						icon: 'none',
					});
					return;
				}
				if(!this.imageValue.length) {
					uni.showToast({
						title: '请上传凭证',
						duration: 1500,
						icon: 'none',
					});
					return;
				}
				let payImg = [];
				this.imageValue.forEach((item) => {
				  payImg.push(item.payImg)
				})
				this.$post({
					url: '/portal/Shop',
					module: 'Order',
					interface: '1009',
					data: {
						id: Number(this.id),
						goodsId: Number(this.goodsId),
						orderGoodsId: this.orderGoodsId,
						num: this.num,
						refundType: this.refundType,
						refundReason: this.form.refundReason,
						refundDesc: this.form.refundDesc,
						refundImgs: payImg
					}
				}).then(res => {
					uni.showToast({
						title: '提交成功',
						duration: 1500,
						icon: 'none',
					});
					setTimeout(() => {
						this.goBack();
					}, 1000)
				})
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		padding: 32rpx;
		width: 100%;
		min-height: calc(100vh - var(--window-top));
		background-color: #f9f9f9;

		.con {
			background-color: #ffffff;
			border-radius: 16rpx;

			.infoBox {
				padding: 32rpx;

				.info {

					.thumb {
						width: 160rpx;
						height: 160rpx;
						border-radius: 16rpx;
					}

					.infoR {
						flex: 1;
						padding-left: 10rpx;
					}

					.infoRT {
						width: 100%;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/* 这里是超出几行省略 */
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 44rpx;
					}

					.infoRB {
						margin-top: 20rpx;

						.price {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #000000;
							line-height: 48rpx;
						}

						.sku {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #afa9b0;
							line-height: 48rpx;
						}
					}
				}

			}
		}

		.reason {
			padding: 32rpx;
			border-radius: 16rpx;
			background-color: #ffffff;
			margin-top: 32rpx;

			.reasonLeft {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.reasonRight {
				.refundReason {
					text-align: right;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.refundDesc {
			padding: 32rpx;
			border-radius: 16rpx;
			background-color: #ffffff;
			margin-top: 32rpx;

			.price {

				.priceTitle {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.priceNum {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #F84E66;
				}

			}

			.explain {
				margin-top: 20rpx;

				.explainTitle {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.explainText {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.upload {
			width: 100%;
			margin-top: 32rpx;
			border-radius: 16rpx;
			background: #ffffff;
			padding: 32rpx 0;

			.uploadTitle {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				padding-left: 32rpx;
				margin-bottom: 42rpx;
			}

			.uploadItem {
				padding: 0 16rpx;


				/deep/.uni-file-picker {
					background: #ffffff;
					border-radius: 16rpx;
				}

				/deep/.file-picker__box {
					margin: 0 13rpx;
				}

				/deep/.uni-file-picker__container {
					background: #ffffff;
				}

				/deep/.file-picker__box {
					background: #ffffff;
				}

				.uploadBg {
					width: 210rpx;
					height: 210rpx;
				}
			}
		}

		.btn {
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			width: 606rpx;
			height: 104rpx;
			background: #F2615F;
			border-radius: 52rpx;
			border: none;
			margin: 100rpx auto;
		}

		.paywayBox {
			width: 100%;
			background-color: #ffffff;
			border-radius: 16rpx 16rpx 0 0;
			padding-top: 44rpx;
			position: relative;
			padding-bottom: 41rpx;

			.close {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 18rpx;
				right: 20rpx;
				z-index: 1;
			}

			.paywayTitle {
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 50rpx;
				text-align: center;
			}

			.way {
				margin-top: 40rpx;

				.wayItem {
					padding: 0 39rpx 0 40rpx;
					height: 110rpx;
					border-top: 2rpx solid #F5F5F5;

					.wayItemLeft {


						.wayItemLeftCon {
							margin-left: 20rpx;

							.wayItemLeftConText {
								font-size: 30rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								line-height: 42rpx;
							}

							.wayItemLeftConCard {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								line-height: 42rpx;
							}
						}
					}

					.wayItemRight {
						.choose {
							width: 40rpx;
							height: 40rpx;
						}

						.add {
							.addText {
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 37rpx;
							}

							.arrowRight {
								width: 32rpx;
								height: 32rpx;
							}
						}
					}
				}

				.wayItem:nth-last-of-type(1) {
					border-bottom: 2rpx solid #F5F5F5;
				}

			}

			.paySure {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 45rpx;
				width: 610rpx;
				height: 88rpx;
				background: #F2615F;
				border-radius: 16rpx;
				margin: 40rpx auto 0;
				padding: 0;
				border: none;
			}
		}
	}
</style>
